import React, {
    Fragment,
    PureComponent
} from 'react';

import {
    View,
    Text,
    StyleSheet
} from 'react-native';

import {
    File,
    Press,
    Tip,
    Loading
} from './../../../components';


import {
    Actions
} from 'react-native-router-flux';

import Ajax from '../../../http/index';

import Footer from './components/footer';

import Container from './components/container';

import Connect from '../../../utils/connect';
import userAction from '../../../state/actions/user';
import * as userTypes from '../../../state/types/user';

import close_icon from './../../../images/register/close.png';
import add_photo from './../../../images/register/add_photo.png';

interface State {
    path:string,
    photoId:string
}

interface Props {
    page:number,
    hasPre:boolean,
    userActions:any,
    onPageChange:Function
}

@Connect({
    userActions:userAction
})
class Photo extends PureComponent<Props,State> {
    state = {
        path:``,
        photoId:``
    }

    static defaultProps = {
        page:0,
        hasPre:true,
        userActions:{},
        onPageChange:() => null
    }

    get userActions() {
        const {
            userActions
        } = this.props;
        return userActions;
    }

    get source() {
        const {
            path
        } = this.state;
        return !!path ? {
            uri:path,
            width:260,
            height:310
        } : add_photo;
    }

    get disabled() {
        const {
            path
        } = this.state;
        return !path;
    }

    private onDelete = () => {
        this.setState({
            path:``
        })
    }

    private onFileChange = ({path}:any) => {
        this.setState({
            path:path
        })
    }

    private toPrePage = () => {
        const {
            page,
            onPageChange
        } = this.props;
        onPageChange(page - 1);
    }

    private toNextPage = () => {
        Actions.reset(`/home`);
    }

    private upload = async (
        path:string
    ) => {
        try {
            const {
                id
            } = await Ajax.
            uploadImage(path) as any;
            return id;
        }
        catch (e) {
            return Promise.reject(e);
        }
    }

    private onSubmit = async () => {
        const {
            path
        } = this.state;

        Loading.show();

        try {
            const para = {
                attachIds:[],
                avatarAId:await this.upload(path)
            }
            await this.userActions[
                userTypes.bindUserPhoto
            ](para);
            this.toNextPage();
        }
        catch (e) {
            Tip.warm({
                message:e.message
            })
        }

        Loading.close();
    }

    render() {
        const {
            path
        } = this.state;

        const {
            hasPre
        } = this.props;

        return (
            <Fragment>
                <Container>
                    <View style={styles.itemRow}>
                        <Text style={styles.title}>
                            Upload your photo?
                        </Text>
                        <View  style={styles.uploadStyle}>
                            <File onChange={this.onFileChange}>
                                <Press source={this.source}/>
                            </File>
                            {!!path && (
                                <Press
                                    source={close_icon}
                                    onPress={this.onDelete}
                                    style={styles.closeButton}
                                />
                            )}
                        </View>
                    </View>
                </Container>
                <Footer
                    showPre={hasPre}
                    disabled={this.disabled}
                    nextPress={this.onSubmit}
                    prePress={this.toPrePage}
                />
            </Fragment>
        )
    }
}

export default Photo;

const styles = StyleSheet.create({
    itemRow:{
        marginBottom:10
    },
    title:{
        fontSize:20,
        color:`#000`,
        marginBottom:30,
        fontWeight:`bold`
    },
    uploadStyle:{
        alignSelf:`center`
    },
    closeButton:{
        top:8,
        right:8,
        width:32,
        height:32,
        borderRadius:18,
        alignItems:`center`,
        position:`absolute`,
        justifyContent:`center`,
        backgroundColor:`rgba(0,0,0,.7)`
    }
}) as any;